<template>
    <view class="tree-item" :class="{
        expand: treeItemData.expand,
        active: activeId === treeItemData.id,
        'no-child': !treeItemData.children || treeItemData.children.length === 0,
    }" :style="{ background: getBgColor(treeItemData.level) }">
        <view class="tree-content" @click="_clickEvent(treeItemData)">
            <view class="border"></view>
            <text class="tree-label">{{ treeItemData.name }}</text>
        </view>
        <!--TreeItem组件中调用TreeItem组件-->
        <view v-if="treeItemData.children && treeItemData.children.length > 0" class="sub-tree">
            <NavTreeItem v-for="(item, index) in treeItemData.children" :key="index" :tree-item-data="item"
                :active-id="activeId" @treeClickEvent="_clickEvent" />
        </view>
    </view>
</template>

<script>
import NavTreeItem from "@/components/productCategory/nav-tree-item.vue"
export default {
    name: "NavTreeItem",
    components: {
        NavTreeItem,
    },
    props: {
        treeItemData: {
            type: Object,
            default() {
                return {}
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {}
    },
    computed: {
        getBgColor() {
            return function (level) {
                switch (level) {
                    case 0:
                        return "#F4F4F4"
                    case 1:
                        return "#EAEAEA"
                    case 2:
                        return "#E0E0E0"
                    case 3:
                        return "#D6D6D6"
                    default:
                        return "#F4F4F4"
                }
            }
        },
    },
    methods: {
        // 节点点击事件
        _clickEvent(item) {
            this.$forceUpdate()
            this.$emit("treeClickEvent", item)
        },
    },
}
</script>
<style lang="scss">
.sub-tree {
    display: none;

    .tree-item {
        .tree-content {
            .tree-label {
                &:after {
                    right: 12rpx;
                }
            }
        }
    }
}

.tree-item {
    .tree-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &:active {
            background: rgba(#ffffff, 0.6);
        }

        .tree-label {
            font-size: $font-size-28;
            min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            padding: 0 30rpx;
            text-align: center;
            color: $color-gray-1;

            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 12rpx;
                width: 0;
                height: 0;
                border-right: 7rpx solid transparent;
                border-left: 7rpx solid transparent;
                border-top: 7rpx solid $color-gray-1;
            }
        }
    }
}

.expand {
    background: $color-white;
    // border-radius: 0px 16rpx 16rpx 0px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;

    // position: relative;
    // z-index: 1;
    &>.sub-tree {
        display: block;
    }

    &>.tree-content {
        .tree-label {
            &:after {
                border-bottom: 7rpx solid $color-gray-1;
                border-top: none;
            }
        }
    }
}

.active {
    &>.tree-content {
        .border {
            background: $app-color-main;
        }

        .tree-label {
            font-weight: 700;
            color: $app-color-main;
            background: $color-white;

            &:after {
                border-bottom-color: $app-color-main;
                border-top-color: $app-color-main;
            }
        }
    }
}

/* #ifndef MP-WEIXIN */
.active>.sub-tree>.tree-item>.tree-content>.tree-label {
    background: $color-white !important;
}

/* #endif */

/* #ifdef MP-WEIXIN */
.active>.sub-tree>nav-tree-item>.tree-item>.tree-content>.tree-label {
    background: $color-white !important;
}

/* #endif */

.tree-item {
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.expand {
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}

.active {
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}

.no-child {
    box-shadow: 0px 0px 0px #ffffff;
    border-radius: 0px;

    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.border {
    position: absolute;
    height: 52rpx;
    width: 8rpx;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 28rpx 28rpx 0;
    z-index: 1;
}
</style>
